"use client";
import styles from "./index.module.scss";
import { useForm } from "react-hook-form";
import FormItem from "@/components/formItem";
import React, { useState, useEffect , useRef} from "react";
import { reportServer } from "@/api";
import "react-toastify/dist/ReactToastify.css";



interface HeaderProps {
    className?: string;
    title: string;
    onClose?: () => void;
  }
  
  const Header: React.FC<HeaderProps> = ({ className = "", title, onClose }) => {
    return (
      <div className={`${styles["header-component"]} ${className}`}>
        <div className={`${styles["header-title"]}`}>{title}</div>
        <div className={`${styles["header-close"]}`}>
            {
                onClose && <i className="fa fa-solid fa-close" onClick={() => onClose()}></i>
            }
         
        </div>
      </div>
    );
  };
  
  interface FoolterProps {
    className?: string;
    onCancel?: () => void;
    onOk: () => void;
  }
  const Foolter: React.FC<FoolterProps> = ({
    className = "",
    onCancel,
    onOk,
  }) => {
    return (
      <div className={`${styles["foolter-component"]} ${className}`}>
        <div className={`${styles["foolter-content"]}`}>
            {
                onCancel &&  <div
                className={`${styles["foolterCancel"]}`}
                onClick={() => onCancel()}
              >
                取消
              </div>
            }
         
          <div className={`${styles["foolterOK"]}`} onClick={() => onOk()}>
            确定
          </div>
        </div>
      </div>
    );
  };


  

interface ReportProps {
  className?: string;
  getFormData: (formData: any) => void;
  title?: string
  onClose: () => void
}

const ReportForm: React.FC<ReportProps> = ({ className = "", getFormData ,title = "举报", onClose}) => {
  const [reports, setReports] = useState([]);
  const [type, setType] = useState<string>("other");

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
    control,
  } = useForm();

  // 获取举报类型
  const queryReportTypeList = async () => {
    try {
      const { code, data, message } = await reportServer.queryReportTypeList({
        type: "reportType",
      });
      if (code === 200) {
        setReports(data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    queryReportTypeList();
  }, []);


  
  const buttonRef = useRef<any>(null);

  const onSubmit = handleSubmit(async (formData:any) => {
    console.log("提交表单", formData);
    getFormData && getFormData(formData);
  })



  const handleRadioChange = (evt: any) => {
    const v = evt?.target?.value;
    v && setType(v);
  };

  const onOk = () => {
    // 判断按钮引用是否存在，以及按钮是否存在
    if (buttonRef.current && buttonRef.current.click) {
       // 调用按钮的点击事件
       buttonRef.current.click();
     }
 };

  return (
    <div className={`${styles["reportComponent"]} ${className}`}>
      <div className={`${styles["header"]}`}>
        <Header title={title}  />
      </div>

      <div className={`${styles["content"]}`}>
        <form  onSubmit={onSubmit}>
          <FormItem label="举报类型" name="type" errors={errors} customFormItemValue={`${styles["cusotmTypeValue"]}`} customFormItemLabel={`${styles["cusotmTypeLabel"]}`} className={`${styles["formBaseItem"]}`}>
            <div className={`${styles["type-form"]}`}>
              {reports.map((r:any, i) => (
                <div key={i} className={`${styles["type-item"]}`}>
                  <input
                    checked={type === r.value}
                    type="radio"
                    id={r.value}
                    value={r.value}
                    {...register("type", { required: "请选择举报类型" })}
                    onChange={handleRadioChange}
                  />
                  <label htmlFor={r.value}>{r.name}</label>
                </div>
              ))}
            </div>
          </FormItem>

          <FormItem label="备注" name="des" errors={errors} className={`${styles["formBaseItem"]}`}>
            <textarea
              className={`${styles["base-input"]}`}
              id="des"
              {...register("des", {
                required: "请输入举报内容",
                pattern: {
                  value: /.+$/,
                  message: "请输入备注",
                },
              })}
              placeholder="请输入举报内容"
              rows={5}
              // type="textarea"
            />
          </FormItem>

          <button type="submit" className={`${styles["onSubmit-btn"]}`} ref={buttonRef} style={{ display: 'none' }}>
            提交
          </button>

        </form>
      </div>
      <div className={`${styles["foolter"]}`}>
        <Foolter onOk={() => onOk()} />
      </div>
    </div>
  );
};

export default ReportForm;
